<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Jasmine Spec Runner v2.0.0</title>

	<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
	<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">

	<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine.js"></script>
	<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine-html.js"></script>
	<script type="text/javascript" src="lib/jasmine-2.0.0/boot.js"></script>

	<!-- include source files here... -->
	<script type="text/javascript" src="${js.test.dir}/${aria.validator.runner.module.name}-layer.js"></script>

	<!-- include spec files here... -->
	<script type="text/javascript" src="spec/AriaSpec.js"></script>
	<style>
		#testDom{
			display:none;
		}
	</style>
</head>

<body>
	<div id="testDom">
		<h1 id="badHeading" role="button">heading button</h1><!-- Breaks the "Second Rule of ARIA" -->
		<select>
			<option id="badOpt" role="option">Bad</option><!-- Breaks the "First Rule of ARIA" -->
			<option>Good</option>
		</select>
		<div id="menubar1" role="menubar" aria-checked="true"><!-- Unsupported state -->
			<!--
				File menu: File menuitem has an aria-haspopup attribute set to 'true'.
				That popup div follows immediately below.
			-->
			<div role="menuitem" aria-haspopup="true" id="fileMenu">File</div><!-- Do not put 'aria-owns' on this element -->
			<div role="menu" aria-labelledby="fileMenu">
				<div id="menuitem1" role="menuitem">Open</div>
				<div role="menuitem">Save</div>
				<div role="menuitem">Save as ...</div>
			</div>
			<div role="combobox" aria-owns="failList1"></div><!-- aria-owns something that is already owned -->
			<!--
			  View menu:
			-->
			<div role="menuitem" aria-haspopup="true" id="viewMenu">View</div>
			<div role="menu" aria-labelledby="viewMenu">
				<div role="menuitem">Normal</div>
				<div role="menuitem">Outline</div>
				<!--
					The View's Zoom menuitem has aria-haspopup='true' as it leads to a
					submenu.
				-->
				<div role="menuitem" aria-haspopup="true" id="zoomSubMenu">Zoom</div>
				<div role="menu" aria-labelledby="zoomSubMenu">
					<div role="menuitem">50%</div>
					<div role="menuitem">75%</div>
					<div role="menuitem">100%</div>
					<div role="menuitem">150%</div>
					<div role="menuitem">200%</div>
				</div>
			</div>
		</div>
		<ul role="list" id="implicitMustContainElement"><!-- Testing 'must contain' -->
			<li>List Item</li>
			<li>List Item</li>
			<li>List Item</li>
			<li>List Item</li>
		</ul>
		<ul>
			<li role="listitem" id="explicitListItem">List Item</li><!-- Testing 'required scope' -->
			<li role="listitem">List Item</li>
			<li role="listitem">List Item</li>
			<li role="listitem">List Item</li>
		</ul>
		<h3 id="rg1_label">Lunch Options</h3>
		<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
			<li id="r1"  tabindex="-1" role="radio" aria-checked="false">
				<img role="presentation" src="radio-unchecked.gif" /> Thai
			</li>
			<li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
				<img role="presentation" src="radio-unchecked.gif" /> Subway
			</li>
			<li id="r3"   tabindex="0" role="radio" aria-checked="true">
				<img role="presentation" src="radio-checked.gif" /> Radio Maria
			</li>
		</ul>
		<h3 id="rg2_label">Lunch Options</h3>
		<ul class="radiogroup" id="rg2" role="radiogroup" aria-labelledby="rg2_label"><!-- radiogroup missing any radio elements -->
			<li id="r21" tabindex="-1" aria-checked="false"><!-- TODO would be great to test for these attributes that do not belong without a role attribute -->
				<img role="presentation" src="radio-unchecked.gif" /> Thai
			</li>
			<li id="r22" tabindex="-1" aria-checked="false">
				<img role="presentation" src="radio-unchecked.gif" /> Subway
			</li>
			<li id="r23" tabindex="0" aria-checked="true">
				<img role="presentation" src="radio-checked.gif" /> Radio Maria
			</li>
		</ul>
		<div role="menu"></div><!-- Missing required descendants -->
		<div id="menuitemFail" role="menuitem"></div><!-- Missing required ancestor -->
		<div id="checkbox1" role="checkbox"></div><!-- Missing required state -->
		<div id="cb1" class="cb">
			<div class="cb_label"><label id="cb1-label" for="cb1-edit">State</label>:</div>
			<input id="cb1-edit" class="cb_edit" type="text" role="combobox" aria-labelledby="cb1-label" aria-autocomplete="none" aria-readonly="true" aria-owns="cb1-list" tabindex="0"><!-- Correct use of aria-owns -->
			<div id="cb1-button-label" class="hidden">Open list of states</div>
			<button id="cb1-button" class="cb_button" aria-labelledby="cb1-button-label" aria-controls="cb1-list" tabindex="-1">
				<img src="images/button-arrow-down.png" alt="Open or close the list box">
			</button>

			<ul id="cb1-list" class="cb_list" tabindex="-1" aria-expanded="false" role="listbox" style="display: none;">
				<li id="cb1-opt1" role="option" class="cb_option" tabindex="-1">Alabama</li><!-- Do not put anything with a role inside this element -->
				<li id="cb1-opt2" role="option" class="cb_option" tabindex="-1">Alaska</li>
				<li id="cb1-opt3" role="option" class="cb_option" tabindex="-1">American Samoa</li>
				<li id="cb1-opt4" role="option" class="cb_option" tabindex="-1">Arizona</li>
			</ul>
		</div>

		<input id="ownDuplicated" type="text" aria-label="Tag" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="failList1" aria-activedescendant="selected_option"/>
		<ul role="listbox" id="failList1">
			<li role="option">Zebra</li>
			<li role="option" id="selected_option">Zoom</li>
		</ul>

		<div role="combobox" id="ownNested" aria-owns="failList2"><!-- Should not aria-owns when DOM hierarchy already conveys this -->
			<span role="listbox" id="failList2"></span>
		</div>

		<!-- The following snippet deliberately includes unusual characters in  attribute values -->
		<span class="widget-wrapper">
			<span class="widget-theme bba-qty-sel bba-simple-qty-sel edp" id="qtydd_tpl" style="" tabindex="-1">
				<span class="off-screen module-js-ignore" id="dropdown_aria_label_{{id}}">
					<span>Quantity</span>
					<span class="dropdown-ie-value module-js-ignore">0</span>
				</span>

				<span id="ariaOwnsStrangeChars" tabindex="0" class="widget-dropdown module-js-ignore" role="combobox" aria-expanded="false" aria-labelledby="dropdown_aria_label_{{id}}" aria-owns="dropdown_aria_list_{{id}}" aria-autocomplete="list" data-guid="{{id}}" data-activedescendant="dropdown_option_{{id}}_0">
					<span>
						<b>
							<b class="widget-default-color dropdown-selected-label module-js-ignore" style="width:21px;" id="dropdown_current_value_{{id}}">0</b>
						</b>
					</span>
				</span>
				<div style="z-index: 95;" class="hideContent dropdown_option_tooltip" role="tooltip" id="dropdown_option_tooltip_{{id}}">Press spacebar for more information</div>
				<div class="dropdown-options-form edp" style="display:none;position:absolute;z-index:105">

					<ul class="widget-dropdown-list module-js-ignore" id="dropdown_aria_list_{{id}}" role="listbox">
							<li id="dropdown_option_{{id}}_" class=" dropdown_default_option " tabindex="0" role="option" aria-disabled="false" aria-selected="true" data-value=""><span class="dropdown_option_text dropdown_option_selected_text">0</span></li>
							<li id="dropdown_option_{{id}}_1" class="" tabindex="0" role="option" aria-disabled="false" aria-selected="false" data-value="1"><span class="dropdown_option_text dropdown_option_selected_text">1</span></li>
							<li id="dropdown_option_{{id}}_2" class="" tabindex="0" role="option" aria-disabled="false" aria-selected="false" data-value="2"><span class="dropdown_option_text dropdown_option_selected_text">2</span></li>
							<li id="dropdown_option_{{id}}_3" class="" tabindex="0" role="option" aria-disabled="false" aria-selected="false" data-value="3"><span class="dropdown_option_text dropdown_option_selected_text">3</span></li>
							<li id="dropdown_option_{{id}}_4" class="" tabindex="0" role="option" aria-disabled="false" aria-selected="false" data-value="4"><span class="dropdown_option_text dropdown_option_selected_text">4</span></li>
							<li id="dropdown_option_{{id}}_5" class="" tabindex="0" role="option" aria-disabled="false" aria-selected="false" data-value="5"><span class="dropdown_option_text dropdown_option_selected_text">5</span></li>
							<li id="dropdown_option_{{id}}_6" class="" tabindex="0" role="option" aria-disabled="false" aria-selected="false" data-value="6"><span class="dropdown_option_text dropdown_option_selected_text">6</span></li>
							<li id="dropdown_option_{{id}}_7" class="" tabindex="0" role="option" aria-disabled="false" aria-selected="false" data-value="7"><span class="dropdown_option_text dropdown_option_selected_text">7</span></li>
							<li id="dropdown_option_{{id}}_8" class="" tabindex="0" role="option" aria-disabled="false" aria-selected="false" data-value="8"><span class="dropdown_option_text dropdown_option_selected_text">8</span></li>
							<li id="dropdown_option_{{id}}_9" class="" tabindex="0" role="option" aria-disabled="false" aria-selected="false" data-value="9"><span class="dropdown_option_text dropdown_option_selected_text">9</span></li>
							<li id="dropdown_option_{{id}}_10" class="" tabindex="0" role="option" aria-disabled="false" aria-selected="false" data-value="10"><span class="dropdown_option_text dropdown_option_selected_text">10</span></li>
					</ul>

				</div>
			</span>
		</span>
		<div id="attributeCheckTree">
			<div>
				<div id="invalidAttrNoRole" aria-kungfu="false" aria-fukung="test" aria-hidden="false" aria-label="test"></div>
			</div>
			<div id="invalidAttrAndGlobalAttrNoRoleAncestor">
				<div role="section">
					<div id="invalidAttrAndGlobalAttrNoRole" aria-kungfu="false" aria-fukung="test"></div>
				</div>
			</div>
			<div id="globalAttrsNoRole" aria-hidden="false" aria-label="test"></div>
			<div id="globalAttrsAndRole" role="section" aria-hidden="false" aria-label="test"></div>
			<div id="globalAttrsAndInvalidRole" role="foobar" aria-hidden="false"aria-label="test"></div>
			<div id="nonglobalAttrsNoRole" aria-checked="false"></div>
			<input type="range" id="implicitRoleImplicitStates" aria-orientation="horitzontal"/>
			<input type="checkbox" id="nonglobalAttrsRightImplicitRole" aria-checked="false"/>
			<input type="text" id="nonglobalAttrsWrongImplicitRole" aria-checked="false"/>
			<div id="nonglobalAttrsAndRole" role="section" aria-checked="false"></div>
			<div>
				<div>
					<div id="nonglobalAttrsAndInvalidRole" role="foobar" aria-checked="false"></div>
				</div>
			</div>
			<div id="mixedAttrsNoRole" aria-hidden="false" aria-label="test" aria-checked="false"></div>
			<div id="mixedAttrsAndRole" role="section" aria-hidden="false" aria-label="test" aria-checked="false"></div>
			<div id="mixedAttrsAndInvalidRoles" role="foobar" aria-hidden="false"aria-label="test" aria-checked="false" aria-pressed="false"></div>
			<ul tabindex="-1" aria-expanded="false" role="listbox" style="display: none;">
				<li role="option" class="cb_option" tabindex="-1">Alabama</li>
				<li role="option" class="cb_option" tabindex="-1">Alaska</li>
				<li role="option" class="cb_option" tabindex="-1">American Samoa</li>
				<li role="option" class="cb_option" tabindex="-1">Arizona</li>
			</ul>
		</div>
		<div id="hasDuplicateIds"><!-- Don't put any elements with role or aria-* attributes in here -->
			<span id="duplicateId"></span>
			<span id="duplicateId"></span>
		</div>
		<div id="idCheckSpace">
			<span id="id withSpace"></span>
		</div>
		<div role="window" id="abstractRoleUsed"><!-- Deliberate use of an abstract role --></div>
		<div id="roleCountContainer">
			<!--
				In this scope there are:
				4 elements with aria-* attributes
				3 elements with aria-* attributes and NO role attribute
				9 elements with role attribute
			-->
			<ul id="anElementWithARole" tabindex="-1" aria-expanded="false" aria-required="true" role="listbox" style="display: none;"><!-- make sure aria-required stays on this -->
				<li role="option" class="cb_option" tabindex="-1">Alabama</li>
				<li role="option" class="cb_option" tabindex="-1">Alaska</li>
				<li role="option" class="cb_option" tabindex="-1">American Samoa</li>
				<li role="option" class="cb_option" tabindex="-1">Arizona</li>
			</ul>
			<ul role="radiogroup">
				<li tabindex="-1" aria-checked="false">
					<img role="presentation" src="radio-unchecked.gif" />
				</li>
				<li  tabindex="-1" aria-checked="false">
					<img role="presentation" src="radio-unchecked.gif" />
				</li>
				<li tabindex="0" aria-checked="true">
					<img role="presentation" src="radio-checked.gif" />
				</li>
			</ul>
		</div>
		<input id="ariarequiredoninput" aria-required="true"/>
		<div id="ariarequiredondiv" aria-required="true"/>
		<div role="presentation" id="ariarequiredonunsupportedrole" aria-required="true"/>
	</div>
</body>
</html>
